<!--
 - Copyright 2022. Huawei Technologies Co., Ltd. All rights reserved.

 - Licensed under the Apache License, Version 2.0 (the "License");
 - you may not use this file except in compliance with the License.
 - You may obtain a copy of the License at

 -   http://www.apache.org/licenses/LICENSE-2.0

 - Unless required by applicable law or agreed to in writing, software
 - distributed under the License is distributed on an "AS IS" BASIS,
 - WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 - See the License for the specific language governing permissions and
 - limitations under the License.
 -->

<!-- 按摩记录 -->
<template>
    <div class="massage_records_container">
        <HeadLine :headName="$t('BDT_fascialgun_massage_records')" @backClick="backClick"/>

        <div class="data_box" :style="style">
            <!-- 缺省 -->
            <div class="empty" v-if="!isHaveData">
                <img class="empty_img" src="@/assets/image/default.png">
                <p class="empty_tip">没有按摩记录</p>
            </div>

            <div v-else>
                <div class="records_data" :style="{ 'background-color': background }">
                    <div class="data_list" v-for="(item, i) in dataList" :key="i">
                        <div>
                            <p class="data_list_time">
                                <span :class="{'rtl-l text-r': $rtl}">{{ item.time }}</span>
                                <span :class="{'rtl-l text-r': $rtl}">分钟</span>
                            </p>
                            <p class="data_list_date" :class="{'rtl-l': $rtl}">{{ item.date }}</p>
                        </div>
                        <div class="fineBorder"></div>
                    </div>
                </div>
                <p class="tip" :class="{'rtl-l': $rtl}">仅展示最近10条记录</p>
            </div>
        </div>
    </div>
</template>
<script>
import HeadLine from "@/components/HeadLine.vue";

export default {
    components: {
        HeadLine
    },
    data(){
        return {
            isHaveData: true, //是否有数据
            dataList: [
                {
                    time: '30',
                    date: '9/30'
                },
                {
                    time: '30',
                    date: '9/30'
                },
                {
                    time: '30',
                    date: '9/30'
                },
                {
                    time: '30',
                    date: '9/30'
                },
                {
                    time: '30',
                    date: '9/30'
                },
                {
                    time: '30',
                    date: '9/30'
                }
            ],
            style: {
                marginTop: (px2rem(window.topHeight)+5.6) + 'rem'
            },
            background: window.isDark ? '#202224' : '#FFFFFF',
        }
    },
    methods:{
        //返回
        backClick(){
            this.$router.go(-1);
        }
    }
}
</script>
<style scoped>
    .data_box{
        padding: .8rem 1.2rem 0;
        position: fixed;
        top: 0;
        left: 0;
        width: -webkit-fill-available;
        height: -webkit-fill-available;
        overflow: hidden scroll;
    }

    .empty{
        margin-top: 40%;
        text-align: center;
    }

    .empty_img{
        width: 12rem;
        height: 12rem;
    }

    .empty_tip{
        font-size: 1.4rem;
        opacity: 0.4;
        font-family: HarmonyHeiTi;
        margin-top: .8rem;
    }

    .records_data{
        padding: .4rem 1.2rem;
        display: flex;
        flex-direction: column;
        background: #fff;
        border-radius: 1.6rem;
    }
    
    .data_list{
        height: 6.4rem;
        display: flex;
        flex-direction: column;
    }

    .data_list > div:first-child{
        height: 6.4rem;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }

    .data_list:last-child .fineBorder{
        border: 0;
    }

    .data_list_time{
        font-size: 1.6rem;
    }

    .data_list_time span{
        display: inline-block;
    }

    .data_list_date{
        font-size: 1.46rem;
        opacity: .7;
    }

    .tip{
        text-align: center;
        font-size: 1.4rem;
        font-family: HarmonyOS_Sans;
        letter-spacing: 2px;
        opacity: .6;
        margin-top: 1.2rem;
    }
</style>